<template>
    <div class="view-container">
        <div class="main-content">
            <div class="list-container">
                <div class="my-tabs-container">
                    <div class="my-tabs">
                        <el-tabs
                                v-model="activeName"
                                @tab-click="handleClick"
                        >
                            <el-tab-pane
                                    label="线索跟进"
                                    name="clueView"
                            />
                            <el-tab-pane
                                    label="客户跟进"
                                    name="clientView"
                            />
                            <el-tab-pane
                                    label="跟进记录"
                                    name="recordView"
                            />
                        </el-tabs>
                        <el-button
                                v-auth="{v: ['crm:area:pms'],bool:activeName==='clueView'}"
                                size="small"
                                type="primary"
                                @click="onCreate"
                        >新建线索
                        </el-button>
                        <el-button
                                v-auth="{v: ['crm:area:pms'],bool:activeName==='clientView'}"
                                size="small"
                                type="primary"
                                @click="onCreate"
                        >注册跟进客户
                        </el-button>
                    </div>
                </div>
                <component
                        :is="activeName"
                        ref="component"
                />
            </div>
        </div>
    </div>
</template>

<script>
    import { defineComponent, defineAsyncComponent, reactive, toRefs,  } from 'vue'
    export default defineComponent({
        name: "followList",
        components:{
            clueView:defineAsyncComponent(()=>
                import('./modules/clueView.vue')
            ),
            clientView:defineAsyncComponent(()=>
                import('./modules/clientView.vue')
            ),
            recordView:defineAsyncComponent(()=>
                import('./modules/recordView.vue')
            )
        },
        setup(){
            var data = reactive({
                activeName:'clueView',
                component:null
            })

            const onCreate = () => {
                data.component.create()
            }

            return{
                ...toRefs(data),

                onCreate,
            }
        }
    })
</script>

<style scoped>

</style>
